<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>图表</title>
  <style>
    .echarts {
      display: flex;
      margin-top: 20px;
    }

    .echart-header .round {
      width: 6px;
      height: 16px;
      background: #1f60e0;
      display: inline-block;
    }

    .echart-header .title {
      position: relative;
      top: -2px;
      color: black;
      font-weight: 600;
      font-size: 14px;
      padding-left: 10px;
    }
  </style>
</head>

<body>
  <div class="echarts">
    <div class="echart-box">
      <div class="echart-header">
        <span class="round"></span>
        <span class="title">做账步骤按产品按天耗时</span>
      </div>
      <div style="width: 500px; height: 400px" id="lineEchart"></div>
    </div>
    <div class="echart-box">
      <div class="echart-header">
        <span class="round"></span>
        <span class="title">核算处理按业务类型处理耗时百分比%</span>
      </div>
      <div style="width: 550px; height: 400px" id="partEchart"></div>
    </div>
  </div>
</body>
<script type="text/javascript" src="./echarts.min.js"></script>
<script type="text/javascript" src="./index.js"></script>
<script type="text/javascript">
  window.onload = function () {
    var xAxisData = [
      '2022/8/11',
      '2022/8/12',
      '2022/8/13',
      '2022/8/14',
      '2022/8/15',
      '2022/8/16',
      '2022/8/17',
    ]
    var yAxisData = [150, 230, 224, 218, 135, 147, 260]
    var partData = [
      { value: 40, name: '和顺丰单号rose 1' },
      { value: 38, name: '和顺丰单号rose 2' },
      { value: 32, name: '和顺丰单号rose 3' },
      { value: 42, name: '和顺丰单号rose 4' },
      { value: 52, name: '和顺丰单号rose 5' },
      { value: 62, name: '和顺丰单号rose 6' },
      { value: 32, name: '和顺丰单号rose 7' },
      { value: 42, name: '和顺丰单号rose 8' },
      { value: 52, name: '和顺丰单号rose 9' },
      { value: 62, name: '和顺丰单号rose 10' },
      { value: 40, name: '和顺丰单号rose 11' },
      { value: 38, name: '和顺丰单号rose 12' },
      { value: 32, name: '和顺丰单号rose 13' },
      { value: 42, name: '和顺丰单号rose 14' },
      { value: 52, name: '和顺丰单号rose 15' },
      { value: 62, name: '和顺丰单号rose 16' },
      { value: 32, name: '和顺丰单号rose 17' }]
    loadLine(xAxisData, yAxisData);
    loadPart(partData);
  }
</script>

</html>